<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!--0. 先引入vue.js-->
		<script src="../js/vue.js"></script>		
	</head>
	<body>
		<!-- 1.View层 -->
		<div id="app">
			<button @click="btnMinus">-</button>
			<span>{{n}}</span>
			<button @click="btnAdd">+</button>
		</div>
		<script>			
			//2 ViewModel层。通过Vue实例实现
			//Vue2语法
			var vm = new Vue({
				el: "#app",
				data: {
					n: 0
				},
				methods: {
					btnAdd() {
						this.n++;
					},
					btnMinus() {
						this.n--;
					},
				},
			});			

			/*
			与Jquery比较
			只要涉及交互: DOM 4步:
			1.查找触发事件的元素
				不用程序找了！用肉眼找！
			2.绑定事件处理函数
				不用js绑定了！改为在HTML中手工绑定！<button @click="add">
			3.查找要修改的元素
			  彻底没有了！因为Vue不直接修改元素！
			4.修改元素
			  遥控修改：只修改data中的变量值即可，只要data中变量值变化，new Vue会自动将data中的新变量值同步到界面上{{}}指定位置！
			*/
		</script>
	</body>
</html>
